<template>
  <div>
    <el-tag>InternalToPhys(0..1)</el-tag>
    <div class="right"><el-button @click="deletdeMode">删除</el-button></div>
  </div>

  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="phys = " style="margin: 5px">
      <el-input v-model="form.intToPhysicsFactor" placeholder="因子"></el-input>
    </el-form-item>
    <el-form-item label="+ internal * " style="margin: 5px">
      <el-input v-model="form.intToPhysicsScaleFactor" placeholder="比例系数">/</el-input>
    </el-form-item>

    <el-divider
      class=""
      style="margin: 0px; border: 40 dashed #987cb9"
    ></el-divider>

    <el-form-item
      label=" "
      class="divider"
      style="margin-left: 100px; margin-top: 5px"
    >
      <el-input v-model="form.intToPhysicsDenominator" placeholder="分母">/</el-input>
    </el-form-item>
    <div>
      <el-form-item label="Up Limit">
        <div style="width: 200px">
          <el-input v-model="form.intToPhysicsUpperLimit"></el-input>
        </div>
      </el-form-item>
      <el-form-item label="Lower Limit">
        <div style="width: 200px">
          <el-input v-model="form.intToPhysicsLowerLimit"></el-input>
        </div>
      </el-form-item>
    </div>

    <el-divider></el-divider>
    <el-form-item>
      <el-button type="primary" @click="intToPhy">内部值转换物理值 保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script  lang="ts"   >
import { defineComponent, ref, computed, onMounted } from 'vue'
import { useStore } from '@/render/store/index'
import { DoubleEdge } from '@antv/x6/lib/shape/standard'
import { da } from 'element-plus/es/locale'

export default defineComponent({
  components: {},
  props: {
    money: {
      type: Number,
      default: 0
    }, 
    physToInternalFactor:{
        type: Number,
      default: 0
    }, 
    physToInternalScaleFactor:{
        type: Number,
      default: 0
    }, 
    physToInternalDenominator:{
        type: Number,
      default: 0
    }, 
    physToInternalUpperLimit:{
        type: Number,
      default: 0
    }, 
    physToInternalLowerLimit:{
        type: Number,
      default: 0
    }
  },
  
  setup(props, { emit }) {
    console.log(props.money)
    let numP = 0
    let numI = 0
    let itemArr = ref([{ content: '', id: 1 }])

    let itemArrPI = ref([{ content: '', id: 1 }])
    const itemLinear = ref([
      { 
        physToInternalFactor: 0,
        physToInternalScaleFactor: 2,
        physToInternalDenominator: 1,
        physToInternalUpperLimit: 0.0,
        physToInternalLowerLimit: 0.0,
        
      }
    ])
    
    const changeMoney1 = () => {
      console.log(props.money + '子组件的💰')
      console.log(itemLinear.value.every + '子组件的itemLinear')
   
      emit('changeMoney', props.physToInternalScaleFactor)
      //告诉父组件事件以及传递的参数
    }

    const AddInterToPhys = () => {
      itemArr.value.push({
        content: 'good',
        id: numI++
      })
    }
    const AddPhysToInter = () => {
      itemArrPI.value.push({
        content: 'good',
        id: numP++
      })
    }
    return {
      itemArr,
      itemArrPI,
      itemLinear,
      changeMoney1,
      AddInterToPhys,
      AddPhysToInter
    }
  },
  data() {
    return {
      
      form: {
        intToPhysicsFactor: 0,
        intToPhysicsScaleFactor: 0,
        intToPhysicsDenominator: 0,
        intToPhysicsUpperLimit: 0.0,
        intToPhysicsLowerLimit: 0.0,
      }
    }
  },
  methods: {
    intToPhy(){
   
    this.$emit('intToPhy', this.form)
    //告诉父组件事件以及传递的参数
    }
  }
})
</script>

<style>
.right {
  position: relative;
  left: 500px;
  top: -40px;
  /* width: 50px; */
  /* margin: 20px; */
  /* border: 3px solid #73AD21; */
  /* padding: 10px; */
}
.xuanfu {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
</style>>